<template>
	<div id="boxx">
		<!-- 小球-->
		<div v-for="ball in balls">
			<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
				<div class="ball" v-show="ball.show">
					<div class="inner inner-hook"></div>
				</div>
			</transition>
		</div>
		<!-- 购物车-->
		<div class="price">
			<div class="wai">
				<div class="li">
					<i class="iconfont icon-cart"></i>
					<span>{{count}}</span>
				</div>
			</div>
			<p>{{jiages}}</p>
			<div class="rights">
				去结算
			</div>
		</div>
		<article>
			<div class="atc1">
				<div @click="pp">
					<p @click="scrollTo(280,100)" v-for="(v,i) in page21" :key="i" :data-index="i">{{v}}</p>
				</div>
			</div>
			<div class="atc2">
				<p>
					<span>热销</span>大家喜欢吃，才叫真好吃</p>
				<router-link tag="div" to="/page2" v-for="(v,i) in page22" :key="i">
					<dl>
						<dt><img :src="v.img"></dt>
						<dd>
							<div>{{v.name}}</div>
							<div>{{v.sl}}</div>
							<div>月份5{{v.num}}份 好评率{{v.hp}}%</div>
							<div>￥{{v.money}}
								<p>
									<i v-show="v.mm" @click="pj(v,$event)" class="iconfont icon-jianshao"></i>
									<em v-show="v.mm">{{v.sll}}</em>
									<i @click="additem(v,$event)" class="iconfont icon-comiisjiahao"></i>
								</p>
							</div>
						</dd>
					</dl>
				</router-link>
			</div>
		</article>

	</div>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
			jiages: 0.0,
			balls: [ //小球 设为3个
				{
					show: false
				},
				{
					show: false
				},
				{
					show: false
				},
			],
			dropBalls: [],
			page21: ["热销", "优惠", "优惠套餐", "精选套餐", "单点助残", "配餐小吃", "串点", "唐饮"],
			page22: [
				{
					img: "static/img/211.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.5,
					sll: 0,
					mm: false,
				},
				{
					img: "static/img/212.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.5,
					sll: 0,
					mm: false,
				},
				{
					img: "static/img/213.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.4,
					sll: 0,
					mm: false,
				},
				{
					img: "static/img/214.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.5,
					sll: 0,
					mm: false,
				},
				{
					img: "static/img/211.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.3,
					sll: 0,
					mm: false,
				},
				{
					img: "static/img/212.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.2,
					sll: 0,
					mm: false,
				},
				{
					img: "static/img/213.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.5,
					sll: 0,
					mm: false,
				},
				{
					img: "static/img/214.webp",
					name: '吉味双贫面',
					sl: '鸡肉+牛肉+洋葱+西兰花',
					num: 504,
					hp: "95",
					money: 34.9,
					sll: 0,
					mm: false,
				}
			]
		}
	},
	methods: {
		//事件
		//解决js浮点数计算bug 之 +
		accAdd: function(arg1, arg2) {
			var r1, r2, m;
			try {
				r1 = arg1.toString().split(".")[1].length;
			}
			catch (e) {
				r1 = 0;
			}
			try {
				r2 = arg2.toString().split(".")[1].length;
			}
			catch (e) {
				r2 = 0;
			}
			m = Math.pow(10, Math.max(r1, r2));
			return (arg1 * m + arg2 * m) / m;
		},
		Subtr: function(arg1, arg2) {
			var r1, r2, m, n;
			try {
				r1 = arg1.toString().split(".")[1].length;
			}
			catch (e) {
				r1 = 0;
			}
			try {
				r2 = arg2.toString().split(".")[1].length;
			}
			catch (e) {
				r2 = 0;
			}
			m = Math.pow(10, Math.max(r1, r2));
			//last modify by deeka
			//动态控制精度长度
			n = (r1 >= r2) ? r1 : r2;
			return ((arg1 * m - arg2 * m) / m).toFixed(n);
		},
		additem(v) {
			this.drop(event.target);
			this.count++;
			v.sll++;
			v.mm = true;
			this.jiages = this.accAdd(this.jiages, v.money);
		},
		drop(el) { //抛物
			for (let i = 0; i < this.balls.length; i++) {
				let ball = this.balls[i];
				if (!ball.show) {
					ball.show = true;
					ball.el = el;
					this.dropBalls.push(ball);
					return;
				}
			}
		},
		beforeDrop(el) {/* 购物车小球动画实现 */
			let count = this.balls.length;
			while (count--) {
				let ball = this.balls[count];
				if (ball.show) {
					let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
					let x = rect.left - 32;
					let y = -(window.innerHeight - rect.top - 22);  //获取y
					el.style.display = '';
					el.style.webkitTransform = 'translateY(' + y + 'px)';  //translateY
					el.style.transform = 'translateY(' + y + 'px)';
					let inner = el.getElementsByClassName('inner-hook')[0];
					inner.style.webkitTransform = 'translateX(' + x + 'px)';
					inner.style.transform = 'translateX(' + x + 'px)';
				}
			}
		},
		dropping(el, done) { /*重置小球数量  样式重置*/
			let rf = el.offsetHeight;
			el.style.webkitTransform = 'translate3d(50px,0,0)';
			el.style.transform = 'translate3d(50px,0,0)';
			let inner = el.getElementsByClassName('inner-hook')[0];
			inner.style.webkitTransform = 'translate3d(50px,0,0)';
			inner.style.transform = 'translate3d(50px,0,0)';
			el.addEventListener('transitionend', done);
		},
		afterDrop(el) { /*初始化小球*/
			let ball = this.dropBalls.shift();
			if (ball) {
				ball.show = false;
				el.style.display = 'none';
			}
		},
		pp(e) {
			for (var i = 0; i < this.pp.length; i++) {
				this.pp[i].style.background = "initial";
			}
			if (e.target.tagName == "P") {
				e.target.style.background = "#fff";
			}
		},
		pj(v) {
			if (v.sll > 0) {
				v.sll--;
				this.count--;
				this.jiages = this.Subtr(this.jiages, v.money);
			}
			if (v.sll == 0) {
				v.mm = false;
			}
			if (this.jiages==0){
				this.jiages=0;
			}
		},
		scrollTo(y, duration) {
 　　		  /*y:目标纵坐标,duration:时间(毫秒)*/
		　　var scrollTop =window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;/*页面当前滚动距离*/
			var distance = y - scrollTop;/*结果大于0,说明目标在下方,小于0,说明目标在上方*/
			var scrollCount = duration / 10;/*10毫秒滚动一次,计算滚动次数*/
			var everyDistance = distance / scrollCount/*滚动距离除以滚动次数计算每次滚动距离*/
			for (var index = 1; index <= scrollCount; index++) /*循环设置scrollBy事件,在duration之内,完成滚动效果*/
			　　setTimeout(function () { window.scrollBy(0, everyDistance) }, 10 * index);
		}
	},
	mounted() {
		//原生js
		this.pp = document.querySelectorAll(".atc1 p");
		Number.prototype.add = function(arg) {
			return accAdd(arg, this);
		};
	},
	computed:{
		
	}
}
</script>

<style scoped lang="less">
.px2rem(@name, @px) {
	@{name}: @px / 37.5 * 1rem;
}

article {
	display: flex;
}

.atc1 {
	.px2rem(width, 75);
	background: rgb(248, 248, 248);
	height: auto;
	div {
		position: sticky;
		z-index: 100;
		.px2rem(top, 40);
		p {
			.px2rem(line-height, 52);
			.px2rem(font-size, 13);
			.px2rem(padding-left, 8);
			border-bottom: 3px solid rgb(232, 232, 232);
		}
		p:first-child {
			background: #fff;
		}
	}
}

.atc2 {
	flex: 1;
	&>* {
		border-bottom: 1px solid rgb(238, 238, 238)
	}
	&>p {
		.px2rem(line-height, 30);
		span {
			.px2rem(font-size, 13);
			font-weight: bold;
			.px2rem(margin-left, 8);
			.px2rem(margin-right, 5);
		}
	}
	&>div {
		dl {
			.px2rem(padding, 8);
			.px2rem(padding-bottom, 26);
			display: flex;
			dt {
				.px2rem(width, 77);
				.px2rem(height, 77);
				.px2rem(margin-right, 8);
				img {
					width: 100%;
					height: 100%;
				}
			}
			dd {
				flex: 1;
				display: flex;
				flex-direction: column;
				&>* {
					flex: 1;
				}
				div:first-child {
					.px2rem(font-size, 15);
					font-weight: bold;
				}
				div:nth-child(2) {
					.px2rem(font-size, 11);
					color: rgb(153, 153, 153);
				}
				div:last-child {
					.px2rem(font-size, 16);
					color: rgb(255, 102, 0);
					font-weight: bold;
					p {
						float: right;
						.px2rem(height, 30);
						.px2rem(line-height, 30);
						color: #000;
						i {
							.px2rem(font-size, 23);
							font-weight: initial;
							color: #0699FF;
							vertical-align: middle;
						}
						i:first-child {
							.px2rem(font-size, 20);
							color: #ccc;
						}
					}
				}
			}
		}
	}
}

.ball {
	position: fixed;
	left: 0;
	.px2rem(bottom, 10);
	z-index: 1000;
	transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
	/*贝塞尔曲线*/
}

.inner {
	.px2rem(width, 23);
	.px2rem(height, 23);
	border-radius: 50%;
	background-color: #0699FF;
	transition: all 0.4s linear;
}

.price {
	.px2rem(height, 55);
	background: #505051;
	position: fixed;
	z-index: 999;
	bottom: 0;
	width: 100%;
	.rights {
		float: right;
		height: 100%;
		width: 30%;
		.px2rem(line-height, 55);
		.px2rem(font-size, 25);
		color: white;
		background: #4cd964;
		text-align: center;
	}
	p {
		.px2rem(font-size, 30);
		.px2rem(margin-left, 150);
		color: white;
		.px2rem(line-height, 55);
		float: left;
	}
	.wai {
		.px2rem(width, 70);
		.px2rem(height, 70);
		.px2rem(bottom, 10);
		.px2rem(margin-left, 30);
		position: fixed;
		display: flex;
		background: #444444;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		div {
			border-radius: 50%;
			background: #3190E8;
			width: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80%;
			i {
				.px2rem(font-size, 30);
				color: white;
			}
			span {
				display: inline-block;
				position: fixed;
				display: flex;
				.px2rem(margin-left, -10);
				.px2rem(width, 30);
				.px2rem(height, 30);
				color: white;
				border-radius: 50%;
				background: #ff5915;
				justify-content: center;
				align-items: center;
				.px2rem(bottom, 55);
				.px2rem(left, 80);
			}
		}
	}
}
</style>
